const path = require("path");
const MiniCssWebpack = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const config = {
  //模式 开发者development |线上模式 production
  mode: "production",
  //指定入口
  // entry: "./src/main.js",
  entry: {
    main: "./src/main.js",
    tools: "./src/utils/index.js",
  },
  //指定出口
  output: {
    //打包目录
    path: path.resolve(__dirname, "dist"),
    //打包文件名
    filename: "js/[name]_bundle.js",
    //指定静态资源输出目录
    assetModuleFilename: "imgs/[name]-[hash][ext]",
    //清理无用的代码
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    },
  },
  //设置缺省类型
  resolve: {
    extensions: [".js", ".json", ".vue"],
  },
  //禁用警告
  performance: {
    hints: false,
  },
  //模块
  module: {
    rules: [
      //解析vue文件
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      //解析css
      { test: /\.css$/, use: [MiniCssWebpack.loader, "css-loader"] },
      //解析sass,sass格式：xx.scss,xxx.sass
      {
        test: /.s[ac]ss$/,
        use: [MiniCssWebpack.loader, "css-loader", "sass-loader"],
      },
      //解析图片资源
      { test: /.(png|jpg|jpeg|gif|svg)$/i, type: "asset/resource" },
      //解析ES6+
      {
        test: /\.m?js$/,
        //排除
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  //插件
  plugins: [
    //实例化vue
    new VueLoaderPlugin(),
    new MiniCssWebpack({
      //管理css输出目录
      filename: "css/public.css",
    }),
    new HtmlWebpackPlugin({
      //模板来源
      template: "./index.html",
      //打包目录里的Html文件名 相对dist目录
      filename: "./index.html",
      //是否压缩
      minify: false,
    }),
  ],
  //启动服务配置
  devServer: {
    //指定运行目录，注意是在内存中
    static: "./dist",
    //指定运行端口
    port: 9999,
    //是否热更新
    hot: true,
  },
};

module.exports = config;
